<template>
    <div class="newsinfo-container">
        <!-- 大标题 -->
        <h1 class="title">{{newsinfo.title}}</h1>
        <!-- 子标题 -->
        <p class="subtitle">
            <span>发表时间:{{ newsinfo.add_time }}</span>
            <span>点击{{ newsinfo.click }}次</span>
        </p>
        <hr/>
        <!-- 内容区域 -->
        <p class="content" v-html="newsinfo.content"></p>

        <!-- 引入评论子组件comment -->
        <!-- :id="this.id"向comment-box组件传递参数id -->
        <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    import comment from '../subcomponents/comment.vue'

    export default {
        data(){
            return{
                id: this.$route.params.id,//将url中传递过来的id值 挂载到data上，方便调用
                newsinfo:{
                    id:1,
                    title:'人民日报：美方单方面发起贸易战没有任何国际法律依据',
                    click:1,
                    add_time:"2012-12-12 12:12:12",
                    content:"美方不顾中方和国际社会反对,单边对华发起301调查。今年3月,美国炮制出所谓301调查报告,不顾征求意见中高达91%的反对声音,于7月6日对中国340亿美元输美产品加征25%关税。中国法学会副会长王其江认为,WTO规则禁止擅自提高关税和未经授权专门针对某一个WTO成员采取措施,而美国无视这些基本规则挑起贸易事端,是对WTO规则的公然违反。“美国公然破坏世界经贸秩序,粗暴践踏WTO体制,肆意发动贸易战,是典型的单边主义、贸易保护主义、贸易霸凌主义,对多边贸易体制造成了严重损害。”"
                    }
            }
        },
        // created(){
        //     this.getNewsInfo();
        // },
        // methods:{
        //     getNewsInfo(){
        //         this.$http.get('api/getnew/' + this.id)
        //         .then(function(result){
        //             if (result.body.status===0) {
        //                 this.newsinfo=result.body.message[0];
        //             } else {
        //                 Toast('获取新闻失败')
        //             }
        //         })
        //     }
        // }
        components:{   //注册子组件
            "comment-box":comment
        }
    }
</script>
<style lang="less" scoped>
    .newsinfo-container{
        padding: 0 5px;
        .title{
            font-size: 16px;
            text-align: center;
            color:red;
        };
        .subtitle{
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            color: blue;
        };
        .content{};
    }
</style>
